<template>

    <div class="app-container">

        <div id="printContent" class="print-area"
            style="width: 98%; margin-left: 2%;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 2%;padding: 2% 3%;">
            <h1 style="text-align: center;">
                低（无）挥发性有机物涂料、油墨、胶粘剂、清洗剂等产品信息披露内容和要求
            </h1>
            <table style="border-collapse: collapse; width: 100%; border: 2px solid #000; text-align: center;">
                <!-- 企业名称行 -->
                <tr style="height: 45px; line-height: 45px;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">企业名称
                    </td>
                    <td style="width: 75%; text-align: left; padding-left: 10px; border: 1px solid #000;" colspan="3">
                        {{list.accessoryName}}</td>
                </tr>

                <!-- 所属领域行1 -->
                <tr style="height: 45px; line-height: 45px;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">所属领域
                    </td>
                    <td style="width: 75%; border: 1px solid #000;text-align: left;padding-left: 10px; " colspan="3">
                        {{list.accessoryArea}}
                    </td>
                </tr>

                <!-- 双列所属领域行 -->
                <tr style="height: 45px; line-height: 45px;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">联系人
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.manufacturer}}</td>
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">联系电话
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.manufacturerTel}}</td>
                </tr>


                <!-- 双列所属领域行 -->
                <tr style="height: 45px; line-height: 45px;" v-for="(product, index) in list.productList" :key="index">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        产品名称及标号
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{product.vocName}}</td>
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">属于剂型
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{product.vocDosage}}</td>
                </tr>
                <!-- 所属领域行1 -->
                <tr style="height: 45px; line-height: 45px;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        声明方式的机构
                    </td>
                    <td style="width: 75%; border: 1px solid #000;text-align: left;padding-left: 10px; " colspan="3">
                        {{list.accessoryAgency}}
                    </td>
                </tr>
                <!-- 出厂状态VOCs行1 -->
                <tr style="height: 60px; vertical-align: middle;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        出厂状态下产品VOCs含量（g/L）
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.accessoryKind}}</td>
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        检测报告编号及机构名称或报告查询地址
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.accessoryType}}</td>
                </tr>

                <!-- 出厂状态VOCs行2 -->
                <tr style="height: 60px; vertical-align: middle;">
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        出厂状态下产品VOCs含量（g/L）
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.accessoryTypeOne}}</td>
                    <td style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold;">
                        检测报告编号及机构名称或报告查询地址
                    </td>
                    <td style="width: 25%; border: 1px solid #000;">{{list.accessoryTypeTwo}}</td>
                </tr>

                <!-- 产品基本情况行 -->
                <tr style="height: 80px; vertical-align: top;">
                    <td
                        style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
                        产品年产能、销售量及销售收入等基本情况</td>
                    <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="3">
                        {{list.accessoryCode}}</td>
                </tr>

                <!-- 技术特点行 -->
                <tr style="height: 80px; vertical-align: top;">
                    <td
                        style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
                        产品的技术特点、应用比较优势</td>
                    <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="3">
                        {{list.processSteps}}</td>
                </tr>

                <!-- 应用场景行 -->
                <tr style="height: 80px; vertical-align: top;">
                    <td
                        style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
                        主要应用场景，成功案例</td>
                    <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="3">
                        {{list.density}}</td>
                </tr>

                <!-- 企业承诺行 -->
                <tr style="height: 100px; vertical-align: top;">
                    <td
                        style="width: 25%; border: 1px solid #000; background-color: #f5f5f5; font-weight: bold; padding-top: 10px;">
                        企业信息披露承诺</td>
                    <td style="width: 75%; border: 1px solid #000; padding: 10px; text-align: left;" colspan="3">
                        <p>企业对声明的内容真实性负责。（盖章）</p>
                        <p style="margin-top: 15px;text-align: right;word-spacing: 55px; ">年月日
                        </p>
                    </td>
                </tr>
            </table>

            <p>1.企业有多种产品的可以用多张表格来声明。</p>
            <p>
                2.企业可内部审查批准自我声明，也可通过认证批准声明，还可引用其他认证的既有结果。
            </p>
            <p>
                3.声明信息应清晰准确可验证，相关支撑材料可附后或指明在共享网站查询取得。
            </p>
            <p>
                4.VOCs含量是指在施工状态下的测试结果。应有质检报告、VOC含量检测报告。5.年销售量、销售收入应与财报相一致。应用案例应有采购合同、服务外包合同等。
            </p>
            <p>6.产品技术特点、应用比较优势应有相应的证明材料。</p>
            <p>7.涉及秘密的，请企业自行非密化处理并说明。</p>
        </div>

        <div class="no-print">
            <div style="text-align: center;" v-if="list.review==1">
                <el-button type="success" size="small" @click="handleReview(list.id,2)">审核通过</el-button>
                <el-button type="primary" size="small" @click="handleReview(list.id,3)">审核驳回</el-button>
            </div>
            <div style="text-align: center;" v-if="list.review==2">
                <el-button type="success" size="small" @click="print()">打印</el-button>
                <el-button v-print="'#printContent'">打印</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { getOrganicDetails, getOrganicApproved } from "@/api/custom";

    import VueQr from "vue-qr";
    export default {
        data() {
            return {
                list: null,
                listLoading: true,
                isShowPayPopup: false,
                tableData: [],
                prc_list: [],
                lid: null,
            };
        },
        components: {
            VueQr,
        },
        created() {
            this.fetchData(this.$route.query.id);
            this.lid = this.$route.query.id;
            this.prc.leaseId = this.lid;
        },
        methods: {
            fetchData(obj) {
                this.listLoading = true;
                getOrganicDetails(obj).then((response) => {
                    this.listLoading = false;
                    this.list = response.data;
                    console.log(this.list);
                });
            },
            setCurrent() {
                this.$refs.table.setCurrentRow(this.tableData[1]);
            },
            refreshCodeTap() { },

            handleReview(id, obj) {
                this.listLoading = true;
                getOrganicApproved(id, obj)
                    .then((response) => {
                        console.log(response);
                        this.listLoading = false;
                        this.$message.success(response.message);
                        this.fetchData(this.lid);
                    })
                    .catch((error) => {
                        console.log(error);
                        this.listLoading = false;
                    });
            },
            print() {
                window.print();
            },
            handlePrint() {
                // 触发浏览器打印
                window.print();
            }
        },
    };
</script>
<style scoped>
    .el-descriptions__header {
        margin-bottom: 0px;
    }

    /* 打印样式：只显示 .print-area，隐藏其他内容 */
    @media print {

        /* 隐藏非打印区域 */
        .no-print {
            display: none !important;
        }

        /* 打印区域样式优化 */
        .print-area {
            width: 100%;
            page-break-inside: avoid;
            /* 避免内容跨页断裂 */
        }

        /* 可选：调整打印纸张和边距 */
        @page {
            size: A4;
            margin: 1.5cm;
        }
    }
</style>